<template>
  <div>
    <el-table
      ref="elTable"
      border
      style="width: 100%"
      empty-text="暂无数据"
      v-loading="loading"
      :height="height || null"
      :max-height="maxHeightNow"
      v-bind="$attrs"
      @sort-change="tableChange"
    >
      <template v-for="(item, index) in columns" :key="index">
        <!-- 多选框 -->
        <el-table-column
          v-if="item.type === 'selection'"
          :align="item.align || 'center'"
          v-bind="item"
          :reserve-selection="item.reserve || false"
        />
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.type === 'index'"
          :index="getIndex"
          :align="item.align || 'center'"
          v-bind="item"
        />
        <!-- 展开视图 -->
        <el-table-column
          v-else-if="item.type === 'expand'"
          :index="getIndex"
          :align="item.align || 'center'"
          v-bind="item"
          :key="index"
        >
          <template #default="scope">
            <slot :name="item.slotName" :scope="scope"></slot>
          </template>
        </el-table-column>
        <!-- 超长文本 -->
        <el-table-column
          v-else-if="item.overflow === 'hidden'"
          :align="item.align || 'center'"
          v-bind="item"
        >
          <template #default="scope">
            <div v-if="item.format">
              <el-popover
                v-bind="item.popover"
                trigger="hover"
                :content="item.format(scope.row[item.prop], scope)"
              >
                <template #reference>
                  <span>
                    {{
                      item.format(scope.row[item.prop], scope).substring(0, item.maxLength) + '...'
                    }}
                  </span>
                </template>
              </el-popover>
            </div>
            <div v-else-if="scope.row[item.prop] && scope.row[item.prop].length > item.maxLength">
              <el-popover v-bind="item.popover" trigger="hover" :content="scope.row[item.prop]">
                <template #reference>
                  <span>{{ scope.row[item.prop].substring(0, item.maxLength) + '...' }}</span>
                </template>
              </el-popover>
            </div>
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
        <!-- 插槽字段 -->
        <el-table-column
          v-else-if="item.slotName"
          :align="item.align || 'center'"
          v-bind="item"
          :sortable="getSortType(item)"
          :show-overflow-tooltip="item.textOverflow === false"
        >
          <template #default="scope">
            <slot :name="item.slotName" :scope="scope"></slot>
          </template>
        </el-table-column>
        <!-- 格式化 -->
        <el-table-column
          v-else-if="item.format"
          :align="item.align || 'center'"
          v-bind="item"
          :sortable="getSortType(item)"
        >
          <template #default="scope">
            <div v-html="item.format(scope.row[item.prop], scope)"></div>
            <!-- {{item.format(scope.row[item.prop], scope)}} -->
          </template>
        </el-table-column>
        <!-- 嵌套表头 -->
        <el-table-column
          v-else-if="item.subColumns"
          :align="item.align || 'center'"
          v-bind="item"
          :sortable="getSortType(item)"
        >
          <el-table-column
            v-for="(o, i) in item.subColumns"
            :align="o.align || 'center'"
            v-bind="o"
            :key="i"
            :sortable="getSortType(o)"
            :show-overflow-tooltip="true"
          />
        </el-table-column>
        <!-- 原生字段 -->
        <el-table-column
          v-else
          :align="item.align || 'center'"
          v-bind="item"
          :sortable="getSortType(item)"
          :show-overflow-tooltip="false"
        />
      </template>
      <template #empty="scope">
        <slot name="empty" :scope="scope"></slot>
      </template>
    </el-table>
    <EPagination
      v-if="pageData.pageShow"
      :total="pageData.total"
      :current-page="currentPage"
      :page-size="currentPageSize"
      @size-change="sizeChange"
      @current-change="currentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    />
  </div>
</template>

<script>
import EPagination from '@/components/e-pagination'

export default {
  name: 'Etable',
  components: {
    EPagination
  },
  props: {
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    maxHeight: {
      type: [Number, String],
      default: 0
    },
    height: {
      type: [Number, String],
      default: 0
    },
    pageData: {
      require: true,
      type: Object,
      default() {
        return {
          pageShow: false,
          total: 0,
          current: 1,
          size: 10
        }
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentPage: 1,
      currentPageSize: 10,
      resetFlag: false
    }
  },
  computed: {
    maxHeightNow() {
      if (!this.maxHeight) {
        const height = window.innerHeight
        return height - (this.pageData.pageShow ? 290 : 242)
      }
      return this.maxHeight
    },
    heightNow() {
      if (!this.height) {
        const height = window.innerHeight
        return height - (this.pageData.pageShow ? 350 : 312)
      }
      return this.height
    }
  },
  watch: {
    pageData: {
      handler(newVal) {
        this.currentPage = newVal.current
        this.currentPageSize = newVal.size
      },
      immediate: true
    },
    currentPage(newVal) {
      this.$emit('update:current', newVal)
    }
  },
  mounted() {},
  created() {},
  methods: {
    tableQuery(param) {
      this.resetFlag = false
      this.$emit('reload-data', param)
    },
    /** 搜索按钮操作 */
    resetQuery() {
      this.$emit('reset-data')
    },
    // 表格列排序
    tableChange(column) {
      // let newObj = this.columns.find((item) => item.prop === column.prop)
      // let sortOrder;
      // // let sortName = column.prop;
      // if (column.order === 'ascending') {
      //   sortOrder = 'asc';
      // } else if (column.order === 'descending') {
      //   sortOrder = 'desc';
      // } else {
      //   sortOrder = '';
      // }
      // const { order } = column
      console.log(column);
      this.$emit('resort-change', column)
    },
    getIndex(index) {
      return index + 1 + (this.currentPageSiz||10) * ((this.currentPage||1) - 1)
    },
    sizeChange(pageSize) {
      this.$emit('page-size-change', pageSize)
      this.$emit('page-change', {
        pageSize,
        pageNum: 1
      })
    },
    currentChange(current) {
      this.$emit('page-current-change', current)
      this.$emit('page-change', {
        pageSize: this.currentPageSize,
        pageNum: current
      })
      this.currentPage = current
    },
    prevClick(current) {
      this.$emit('page-prev-click', current)
    },
    nextClick(current) {
      this.$emit('page-next-click', current)
    },
    clearSelection() {
      this.$refs.elTable.clearSelection()
    },
    doLayout() {
      this.$refs.elTable.doLayout()
    },
    /**
     * @description: 判断是否排序
     * @param {*} value
     * @return {*}
     */
    getSortType(row) {
      let { sortable } = row
      if (typeof (sortable) == 'boolean') {
        return sortable;
      }
      else if (sortable === undefined) {
        return false;
      }
      else {
        return 'custom';
      }

      // let { sortKey, label } = row
      // if (sortKey) {
      //   return true
      // } else {
      //   return false
      // }
      // return false
    },
    toggleRowSelection(row, selected) {
      this.$refs.elTable.toggleRowSelection(row, selected)
    },
    toggleAllSelection() {
      this.$refs.elTable.toggleAllSelection()
    },
    toggleRowExpansion(row, expand) {
      this.$refs.elTable.toggleRowExpansion(row, expand)
    },
    getData() {
      return this.$refs.elTable.data
    }
  },
  emits: [
    'page-size-change',
    'page-current-change',
    'page-prev-click',
    'page-next-click',
    'page-change',
    'resort-change',
    'reload-data',
    'reset-data',
  ]
}
</script>

<style></style>
